<script lang="ts" setup>
import { useMessage } from "@/hooks/web/use-message";
import { lineReader } from "@/utils";
import { ref } from "vue";
import { VXETable } from "vxe-table";

const display = ref<string>("");
const { createMessage } = useMessage();

async function handleClick() {
  const { file } = await VXETable.readFile({ types: ["csv"] });
  lineReader(
    file,
    { cacheSize: 10000, stepSize: 256 },
    {
      reading(block) {
        display.value = block.index / file.size + "";
      },
      complete() {
        createMessage("success", "Read complete!");
      },
    },
  );
}
</script>

<template>
  <div class="file-work">
    <div>FILE WORK</div>
    <div>
      <el-button type="primary" @click="handleClick">打开</el-button>
    </div>
    <div>{{ display }}</div>
  </div>
</template>

<style lang="scss" scoped>
.file-work {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  // background-color: aquamarine;
  padding: 10px;
  height: 100%;
}
</style>
